<template>
	<div class="search-table-box" :style="'top:' + props.currentClientY + ';left:' + props.currentLeft" v-show="props.currentSearchTrNum">
		<el-table
			:height="350 + 'px'"
			:rowKey="'sku'"
			v-loading="state.searchTableLoading"
			:data="state.dataList"
			@cell-click="cellChange"
			:header-cell-style="{ color: '#000', background: '#F5F7FA' }"
			:cell-class-name="cannotCheckTr"
		>
			<el-table-column label="图片" prop="picUrl" width="80px">
				<template #default="scope">
					<div class="list-image">
						<ewt-image
							:url="scope.row.picUrl"
							style="width: 36px; height: 36px; object-fit: contain; display: block; cursor: pointer"
						/>
						<div class="tag-combination" v-if="scope.row.skuType === '2'">组</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="产品名称 / SPU / SKU" prop="skuName" width="180">
				<template v-slot="{ row }">
					{{ row.skuName || '--' }} <br />
					{{ row.spu || '--' }}<br />
					{{ row.sku || '--' }}
				</template>
			</el-table-column>
			<el-table-column label="备货平台" prop="stockPlatformName" width="120px"></el-table-column>
			<el-table-column label="MSKU / FNSKU" prop="MSKU" width="160">
				<template v-slot="{ row }">
					{{ row.msku || '--' }} <br />
					{{ row.fnsku || '--' }}
				</template>
			</el-table-column>
			<el-table-column v-if="props.type !== 'inboundDelivery'" label="良品可用量" prop="goodAvailableQty" width="110"></el-table-column>
			<el-table-column v-if="props.type !== 'inboundDelivery'" label="次品可用量" prop="defectiveAvailableQty" width="110"></el-table-column>
		</el-table>
		<div class="search-table-pagination">
			<el-pagination
				@current-change="getTableList"
				:page-size="state.searchForm.size"
				v-model:current-page="state.searchForm.current"
				layout="total, prev, pager, next"
				:total="state.total"
			></el-pagination>
		</div>
		<ewt-image-viewer v-if="state.imageViewer" :url-list="[state.imageViewer]" @close="closeViewer" />
	</div>
</template>
<script setup lang="ts" name="searchTable">
import { stockSkuList } from '../api.ts';
const props = defineProps({
	form: {
		type: Object,
		default: () => {
			return {};
		},
	},
	searchValue: {
		type: String,
		default: '',
	},
	currentSearchTrNum: {
		type: Number,
		default: null,
	},
	currentCheckedList: {
		type: Array,
		default: () => [],
	},
	currentClientY: {
		type: String,
		default: '',
	},
	currentLeft: {
		type: String,
		default: '',
	},
	type: {
		type: String,
		default: '',
	},
});
const state = reactive({
	searchForm: {
		current: 1,
		size: 50,
		searchDto: {
			searchFieldId: '2',
			searchValue: '',
			searchValueList: [],
			searchMode: 'mode_like',
		},
		companyId: '',
		teamId: '',
		whIdFrom: '',
		whIdTo: '',
		stockingAreaCode: '',
	},
	total: 0,
	pages: 0,
	dataList: [],
	searchTableLoading: false,
	imageViewer: '',
});
const emit = defineEmits(['getCurrentSku']);

const getTableList = (size) => {
	state.searchTableLoading = true;
	state.searchForm.searchDto.searchValue = props.searchValue;
	state.searchForm.current = size;

	state.searchForm.companyId = props.form.companyId;
	// state.searchForm.companyId = '1';
	state.searchForm.teamId = props.form.teamId;
	// state.searchForm.teamId = '1';
	state.searchForm.whIdFrom = props.form.whIdFrom;
	state.searchForm.whIdTo = props.form.whIdTo;
	state.searchForm.stockingAreaCode = props.form.stockingAreaCode || props.form.stockupAreaCode;
	// state.searchForm.stockingAreaCode = 'US';

	stockSkuList(state.searchForm)
		.then((res) => {
			state.dataList = res.data.records;
			state.total = res.data.total;
			state.pages = res.data.pages;
			judgeIsChecked();
			nextTick(() => {
				state.searchTableLoading = false;
			});
		})
		.catch(() => {
			state.searchTableLoading = false;
		});
};
watch(
	() => props.searchValue,
	() => {
		getTableList(1);
	},
	{
		deep: true,
		immediate: true,
	}
);
watch(
	() => props.currentSearchTrNum,
	() => {
		getTableList(1);
	},
	{
		deep: true,
		immediate: true,
	}
);

onMounted(() => {
	getTableList(1);
});
const showImageViewer = (img, event) => {
	event.stopPropagation();
	state.imageViewer = img;
};
const closeViewer = () => {
	state.imageViewer = '';
};
const judgeIsChecked = () => {
	let checkedIdList = [];
	props.currentCheckedList.forEach((item) => {
		checkedIdList.push(item.skuName);
	});
	state.dataList.forEach((item) => {
		if (checkedIdList.indexOf(item.skuName) !== -1) {
			item.isCanCheck = false;
		} else {
			item.isCanCheck = true;
		}
	});
};
const cellChange = (row) => {
	if (row.isCanCheck) {
		emit('getCurrentSku', row, props.currentSearchTrNum);
	}
};
const cannotCheckTr = (row) => {
	if (!row.row.isCanCheck) {
		return 'cannot-check';
	}
};
</script>
<style scoped  lang='scss'>
.search-table-box {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
	border-radius: 4px;
	background: #fff;
	padding: 10px 12px;
	position: absolute;
	top: 132px;
	left: 530px;
	z-index: 999;
}
.search-table-box :deep(.el-table tbody tr) {
	cursor: pointer !important;
}
.search-table-box :deep(.cannot-check) {
	cursor: not-allowed;
	background: #f1f1f1;
}
:deep(.cell) {
	word-break: break-all;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.non-pic {
	background: rgba(11, 16, 25, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.03);
	color: rgba(11, 16, 25, 0.12);
	border-radius: 2px;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
}
</style>
